<template>
    <div class="container">
        <div class="head">
            <ShopHead/>
        </div>
        <div class="search">
            <Search/>
        </div>
        <div class="market">
            <MarketList/>
        </div>
    </div>
  </template>
  
<script>
import { useRoute } from 'vue-router';
import { onMounted, provide, reactive, ref } from 'vue';
import Search from '../Home/components/Search.vue'
import MarketList from '../Home/components/MarketList.vue';
import ShopHead from './components/ShopHead'
import ShopGoodsList from './components/ShopGoodsList'
export default {
    name:'Shop',
    components:{Search,ShopGoodsList,ShopHead,MarketList},
    setup(){
        // 跳转到此页面重置滚动条
        onMounted(()=>{
            window.scrollTo(0,0)
        })

        const route = useRoute()
        //跳转至本页面携带的信息
        let item = reactive(JSON.parse(route.query.msg))
        provide('navItem',item)

        return {
            item
        }
    }
}
</script>
  
  <style scoped>
    .container {
      margin-left: auto;
      margin-right: auto;
      width: 80%;
      background-color: #F56C6C;
      border-radius: 8px;
      min-width: 500px;
    }
  </style>